const CracoLessPlugin = require('craco-less');
// import CracoLessPlugin from 'craco-less'

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { 
              '@primary-color': '#e13f27',
              '@padding-lg': '12px', // containers
              '@padding-md': '8px', // small containers and buttons
              '@padding-sm': '6px', // Form controls and items
              '@padding-xs': '4px', // small items
              '@padding-xss': '2px',
              '@layout-header-padding': '0 24px',
              '@layout-footer-padding': '12px 24px',
              '@form-vertical-label-padding': '0 0 4px',
              '@modal-footer-padding-vertical': '5px',
              '@modal-footer-padding-horizontal': '8px',
              '@modal-confirm-body-padding': '16px 16px 12px',
              '@menu-item-padding-horizontal': '10px',
              '@table-padding-vertical': '8px',
              '@table-padding-horizontal': '8px',
              '@tree-child-padding': '9px',
              '@collapse-header-padding-extra': '20px',
              '@list-item-padding-lg': '8px 12px',
              '@timeline-item-padding-bottom': '10px',
              '@notification-padding-vertical': '8px',
              '@notification-padding-horizontal': '12px',
              '@card-head-padding': '8px',
              '@card-head-height': '24px',
              '@card-head-height-sm': '18px',
              '@card-inner-head-padding': '6px',
              '@card-padding-base': '12px',
              '@border-radius-base': '6px',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};